<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/index.css" />
    <title>Location</title>
  </head>

  <body>
    <div id="app">
      <table class="main">
        <tbody>
          <tr v-for="(location, index) in locations">
            <td class="index-cell">{{ index + 1 }}</td>
            <td>
              <table class="location">
                <tr>
                  <td><input type="text" v-model="location.l1" /></td>
                  <td class="lastCol">
                    <input type="text" v-model="location.l2" />
                  </td>
                </tr>
                <tr class="lastRow">
                  <td><input type="text" v-model="location.l3" /></td>
                  <td class="lastCol">
                    <input type="text" v-model="location.l4" />
                  </td>
                </tr>
              </table>
            </td>
            <td class="check-cell">
              <textarea v-model="location.check"></textarea>
            </td>
            <td v-if="index == 0">
              <button @click="handleAdd" class="add-btn">
                <svg
                  t="1586703149866"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2165"
                  width="32"
                  height="32"
                >
                  <path d="M512 1255.489906" p-id="2166" fill="#cdcdcd"></path>
                  <path
                    d="M781.15051 491.225265 534.207476 491.225265 534.207476 244.896262c0-12.38297-10.131521-22.514491-22.514491-22.514491s-22.514491 10.131521-22.514491 22.514491L489.178493 491.225265 242.84949 491.225265c-12.38297 0-22.821507 10.336198-22.821507 22.719168l0-0.102339c0 12.38297 10.438537 22.412153 22.821507 22.412153L489.178493 536.254247l0 246.943034c0 12.38297 10.131521 22.514491 22.514491 22.514491s22.514491-10.131521 22.514491-22.514491L534.207476 536.254247l246.943034 0c12.38297 0 22.207476-9.926844 22.207476-22.309814l0-0.102339C803.357985 501.459125 793.53348 491.225265 781.15051 491.225265z"
                    p-id="2167"
                    fill="#cdcdcd"
                  ></path>
                </svg>
              </button>
            </td>
            <td v-else="index == 1">
              <button @click="handleRemove(index)" class="remove-btn">
                <svg
                  t="1586702668881"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2166"
                  width="32"
                  height="32"
                >
                  <path
                    d="M517.59 21.609c-100.299 0-181.703 79.514-185.167 179.34H98.603c-25.979 0-47.235 21.099-47.235 47.236 0 25.98 21.099 47.237 47.236 47.237h52.117v528.416c0 99.196 67.233 180.285 150.37 180.285h423.55c82.98 0 150.37-80.616 150.37-180.285V295.737h47.236c25.98 0 47.236-21.1 47.236-47.237 0-25.98-21.099-47.236-47.236-47.236H702.441C699.449 101.124 617.888 21.61 517.59 21.61z m-96.677 179.34c3.464-51.172 45.19-90.85 96.834-90.85s93.37 39.835 96.362 90.85H420.913z m-119.98 714.842c-29.444 0-61.88-37.789-61.88-91.953V295.737h547.311V824.31c0 54.007-32.436 91.954-61.88 91.954H300.933v-0.473z m0 0"
                    p-id="2167"
                    fill="#cdcdcd"
                  ></path>
                  <path
                    d="M364.387 802.267c21.57 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.572 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.32 48.653 39.364 48.653z m142.496 0c21.571 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.571 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.793 48.653 39.364 48.653z m149.896 0c21.571 0 39.364-21.571 39.364-48.653V476.022c0-27.082-17.635-48.654-39.364-48.654-21.571 0-39.363 21.572-39.363 48.654v277.592c0 26.924 17.162 48.653 39.363 48.653z m0 0"
                    p-id="2168"
                    fill="#cdcdcd"
                  ></path>
                </svg>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="js/vue.js"></script>
    <script>
      document.oncontextmenu = function () {
        return false;
      };

      var app = new Vue({
        el: "#app",
        data: {
          locations: [
            {
              l1: "",
              l2: "",
              l3: "",
              l4: "",
              check: "",
            },
          ],
        },
        methods: {
          handleAdd: function () {
            this.locations.push({
              l1: "",
              l2: "",
              l3: "",
              l4: "",
              check: "",
            });
          },
          handleRemove: function (index) {
            this.locations.splice(index, 1);
          },
        },
      });

      function getLocations() {
        return JSON.stringify(app.locations);
      }

      function setLocations(json) {
        app.locations = JSON.parse(json);
      }
    </script>
  </body>
</html>
